{% load static %}
{% load static %}
<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>网站名称 - 首页</title>
    <meta name="description" content="网站的简短描述">
    <meta name="keywords" content="关键词1, 关键词2, 关键词3">
    <link rel="stylesheet" href="styles.css">
    <!-- 引入其他必要的库或资源 -->
    <link rel="stylesheet" href="{% static 'css/bootstrap.min.css' %}">
    <script src="{% static 'js/echarts.min.js' %}"></script>
    <script src="{% static 'js/jquery-3.6.0.min.js' %}"></script>
    <script src="{% static 'js/bootstrap.min.js' %}"></script>
    <!-- layout2.html -->
    <!-- 其他头部内容 -->
    <link rel="stylesheet" href="{% static 'css/custom.css' %}">
    <style>
        body {
            font-family: Arial, sans-serif;
            margin: 0;
            padding: 0;
            background-color: #f4f4f9;
        }

        header {
            background-color: #333;
            color: #fff;
            padding: 10px 0;
        }

        header .logo a {
            color: #fff;
            text-decoration: none;
            font-size: 24px;
            margin-left: 20px;
        }

        header nav ul {
            list-style: none;
            margin: 0;
            padding: 0;
            display: flex;
            justify-content: flex-end;
            margin-right: 20px;
        }

        header nav ul li {
            margin-left: 20px;
        }

        header nav ul li a {
            color: #fff;
            text-decoration: none;
            transition: color 0.3s;
        }

        header nav ul li a:hover {
            color: #ddd;
        }

        main {
            padding: 20px;
        }

        section {
            margin-bottom: 40px;
        }

        #hero {
            background-image: url('{% static "images/hero-background.jpg" %}');
            background-size: cover;
            background-position: center;
            color: #fff;
            text-align: center;
            padding: 100px 20px;
        }

        #hero h1 {
            font-size: 36px;
            margin-bottom: 20px;
        }

        #hero p {
            font-size: 18px;
            margin-bottom: 30px;
        }

        .cta-button {
            background-color: #007bff;
            color: #fff;
            padding: 10px 20px;
            text-decoration: none;
            border-radius: 5px;
            transition: background-color 0.3s;
        }

        .cta-button:hover {
            background-color: #0056b3;
        }

        #features, #testimonials, #latest-news {
            background-color: #fff;
            padding: 20px;
            border-radius: 8px;
            box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
        }

        footer {
            background-color: #333;
            color: #fff;
            text-align: center;
            padding: 20px 0;
        }

        footer nav ul {
            list-style: none;
            margin: 0;
            padding: 0;
            display: flex;
            justify-content: center;
        }

        footer nav ul li {
            margin: 0 10px;
        }

        footer nav ul li a {
            color: #fff;
            text-decoration: none;
            transition: color 0.3s;
        }

        footer nav ul li a:hover {
            color: #ddd;
        }
    </style>
</head>
<body>
<header>
    <div class="logo">
        <a href="#">Logo图片或文字</a>
    </div>
    <nav>
        <ul>
            <li><a href="/system/login">登陆</a></li>
            <li><a href="/system/user_manage/create">注册</a></li>
            {#            <li><a href="#home">首页</a></li>#}
            {#            <li><a href="#about">关于我们</a></li>#}
            {#            <li><a href="#services">服务</a></li>#}
            {#            <li><a href="#portfolio">作品集</a></li>#}
            {#            <li><a href="#contact">联系我们</a></li>#}
        </ul>
    </nav>
</header>

<main>
    <section id="hero">
        <h1>欢迎使用厨具数据可视化系统</h1>
        <p>登陆即可使用本系统</p>
        {#        <a href="#more-info" class="cta-button">了解更多</a>#}
    </section>

    {#    <section id="features">#}
    {#        <h2>我们的特色</h2>#}
    {#        <!-- 特色内容 -->#}
    {#    </section>#}
    {##}
    {#    <section id="testimonials">#}
    {#        <h2>客户评价</h2>#}
    {#        <!-- 客户评价内容 -->#}
    {#    </section>#}
    {##}
    {#    <section id="latest-news">#}
    {#        <h2>最新消息</h2>#}
    {#        <!-- 最新消息内容 -->#}
    {#    </section>#}
</main>

{#<footer>#}
{#    <p>&copy; 2025 网站名称. 保留所有权利.</p>#}
{#    <nav>#}
{#        <ul>#}
{#            <li><a href="#">隐私政策</a></li>#}
{#            <li><a href="#">使用条款</a></li>#}
{#            <li><a href="#">网站地图</a></li>#}
{#        </ul>#}
{#    </nav>#}
{#</footer>#}

<script src="scripts.js"></script>
<!-- 加载JavaScript文件和其他脚本 -->
</body>
</html>
